<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加管理员</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入 Vue.js -->
    <script src="/assets/vue/vue.global.js"></script>
    <!-- 引入 Element Plus -->
    <script src="/assets/element-plus/index.full.js"></script>
    <!-- 引入 Axios -->
    <script src="/assets/axios/axios.js"></script>
    <!-- 引入自定义安全模块 -->
    <script src="/assets/oa/security.js"></script>
    <style>
        /* 自定义样式 */
        body {
            margin: 0; /* 去除页面边距 */
            padding: 0; /* 去除页面内边距 */
            overflow: hidden; /* 禁止页面滚动 */
            display: flex; /* 使用 Flex 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 设置页面高度为浏览器窗口高度 */
            background-color: #f0f2f5; /* 设置页面背景色 */
        }
        .upload-container {
            display: flex;
            flex-direction: column; /* 垂直排列 */
            align-items: center; /* 水平居中 */
        }
        .preview-image-container {
            max-width: 100%; /* 设置最大宽度为浏览器窗口宽度 */
            max-height: 80vh; /* 设置最大高度为浏览器窗口高度的80% */
            overflow: hidden; /* 超出部分隐藏 */
        }
        .preview-image {
            max-width: 200px; /* 设置最大宽度为200像素 */
            max-height: 200px; /* 设置最大高度为200像素 */
            height: 20%;
            display: block; /* 让图片自动居中显示 */
            margin: auto; /* 让图片自动居中显示 */
            object-fit: contain; /* 图片自适应 */
        }
        .upload-button {
            margin-top: 10px; /* 调整按钮与图片之间的距离 */
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页面标题 -->
    <h2>添加管理员</h2>
    <!-- 表单 -->
    <el-form ref="form" :model="admin" label-width="80px">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="admin.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="admin.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="admin.confirmPassword" type="password" placeholder="请确认密码"></el-input>
        </el-form-item>
        <!-- 上传按钮和图片 -->
        <div class="upload-container">
            <div class="preview-image-container">
                <img v-if="admin.previewImage" class="preview-image" :src="admin.previewImage" alt="预览图像">
            </div>
            <el-upload
                    class="upload-demo"
                    action="/uploadProfilePicture"
                    :show-file-list="false"
                    :on-success="handleUploadSuccess"
                    :before-upload="beforeUpload"
                    :on-change="handleFileChange"
                    :multiple="false">
                <el-button class="upload-button" type="primary" size="small">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传图片文件，且不超过 500kb</div>
            </el-upload>
        </div>

        <!-- 添加管理员按钮 -->
        <el-form-item style="margin-top: 10px;"> <!-- 调整按钮与上传容器之间的距离 -->
            <el-button type="primary" @click="addAdmin">添加管理员</el-button>
        </el-form-item>
    </el-form>
</div>

<script>
    // 定义 Main 组件
    var Main = {
        data() {
            return {
                admin: {
                    username: '',
                    password: '',
                    confirmPassword: '',
                    previewImage: '', // 预览图像的 base64 编码
                    profilePicture: '' // 图片文件
                }
            }
        },
        methods: {
            addAdmin() {
                if (this.admin.password !== this.admin.confirmPassword) {
                    this.$message.error('密码不一致');
                    return;
                }
                axios.post("/managerinfo/add", this.admin)
                    .then(response => {
                        console.log("管理员添加成功");
                        this.$message.success('管理员添加成功');
                        // 清空表单
                        this.resetForm();
                    })
                    .catch(error => {
                        console.error("管理员添加失败：" + error);
                        this.$message.error('管理员添加失败');
                    });
            },
            resetForm() {
                this.admin.username = '';
                this.admin.password = '';
                this.admin.confirmPassword = '';
                this.admin.previewImage = '';
                this.admin.profilePicture = '';
            },
            handleUploadSuccess(response, file) {
                console.info("返回的图片名称")
                console.info(response)
                this.admin.profilePicture = response; // 假设后端返回上传成功后的图片地址
            },
            beforeUpload(file) {
                const isImage = file.type.startsWith('image/'); // 检查文件类型是否为图片
                const isLt500K = file.size / 1024 < 1000;

                if (!isImage) {
                    this.$message.error('只能上传图片文件！');
                }
                if (!isLt500K) {
                    this.$message.error('上传头像图片大小不能超过 1000KB！');
                }
                return isImage && isLt500K;
            },
            handleFileChange(file, fileList) {
                // 用户选择文件后，读取文件并显示预览图像
                if (fileList.length > 0) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.admin.previewImage = e.target.result;
                    };
                    reader.readAsDataURL(file.raw);
                }
            }
        }
    };

    // 创建 Vue 应用
    const app = Vue.createApp(Main);
    // 使用 Element Plus
    app.use(ElementPlus);
    // 挂载至 #app
    app.mount("#app");
</script>

</body>
</html>
